<template>
  <div class="header-container">
    <div class="section-container">
        <div class="count-container">
          <statis-item v-for="item in counts['counts']" :key="item.itemName" :count="item" />
        </div>
        <div class="search-inputs">
            <el-form :inline="true" class="demo-form-inline" label-position="right" label-width="100px">
            <el-form-item label="时间区间">
                <el-date-picker v-model="invoiceDate" :clearable="false" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" />
            </el-form-item>
            <el-button type="primary" @click="queryCruxCount">查询</el-button>
            <!-- <el-button @click="handelRest">重置</el-button> -->
            </el-form>
        </div>
        <div class="count-container">
          <statis-item v-for="item in counts['alarmCounts']" :key="item.itemName" :count="item" />
          <div v-if="counts['appearContuns'].length" class="vertical-line"/>
          <statis-item v-for="item in counts['appearContuns']" :key="item.itemName" :count="item" unit="条"/>
        </div>
    </div>
  </div>
</template>

<script>
import { queryCruxData } from '@/api/crossRegionalMonitoring'
import { dateFtt } from '@/utils/public'
import statisItem from './statisItem'
export default {
  name: 'StatisItems',
  components: { statisItem },
  props: {
    counts: {
      type: Object,
      default() {
        return []
      }
    },
    tabName: {
      type: String,
      default() {
        return ''
      }
    }
  },
  data() {
    return {
      invoiceDate: []
    }
  },
  created() {
    if (this.tabName) {
      this.queryCruxCount()
    }
    const startDate = this.getStartOfDay(30)
    this.invoiceDate = [startDate, new Date()]
  },
  methods: {
    getStartOfDay(daysAgo = 7) {
      const date = new Date()
      date.setHours(0, 0, 0, 0) // 设置为当天的0点
      date.setDate(date.getDate() - daysAgo) // 往前推7天
      return date
    },
    async queryCruxCount() {
      const params = this.formatParams()
      const { data } = await queryCruxData(params)
      // const { data } = await queryCruxData()
      const result = data.data
      this.$emit('search', result)
    },
    formatParams() {
      const params = { ...this.pages }
      if (this.invoiceDate && this.invoiceDate.length) {
        params['startTime'] = dateFtt(this.invoiceDate[0], 'yyyy-MM-dd')
        params['endTime'] = dateFtt(this.invoiceDate[1], 'yyyy-MM-dd')
      }
      return params
    },
    // 清空查询条件
    handelRest() {
      this.invoiceDate = []
    }
  }
}
</script>
<style lang="scss" scoped>
.count-container{
  display: flex;
  .vertical-line {
    border-left: 1px solid #333;
    height: 72px; /* 可以根据需要调整高度 */
    margin-left: 25px; /* 可以根据需要调整左右外边距 */
  }
}
</style>
